---
title: Rotate Plugin
description: Add functionality to rotate the entire PDF document in 90-degree increments.
searchable: true
---

# Rotate Plugin

The Rotate Plugin allows you to change the orientation of the entire document. It applies a rotation to every page, letting users view content in 90-degree increments.

## Installation

This plugin is available as a separate NPM package.

```sh npm2yarn
npm install @embedpdf/plugin-rotate
````

## Registration

Import `RotatePluginPackage` and add it to the `plugins` array. You can also specify a default rotation to apply when a document is first loaded.

```tsx {4, 16-18}
import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
import { Rotation } from '@embedpdf/models'
import { RotatePluginPackage } from '@embedpdf/plugin-rotate/react'

const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),

  // Register and configure the rotate plugin
  createPluginRegistration(RotatePluginPackage, {
    defaultRotation: Rotation.Degree90, // Start documents rotated 90° clockwise
  }),
]

// ... rest of your component
```

## Usage

The plugin provides the `useRotate` hook to control the rotation from your UI and a `<Rotate />` component to apply the visual transformation to each page.

### Building a Rotate Toolbar

Use the `useRotate` hook to get the current `rotation` state and the `provides` object, which contains methods to change it. The `rotation` state is a number from the `Rotation` enum (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°).

```tsx filename="RotateToolbar.tsx"
import { useRotate } from '@embedpdf/plugin-rotate/react'

export const RotateToolbar = () => {
  const { rotation, provides: rotate } = useRotate()

  if (!rotate) {
    return null
  }

  return (
    <div className="toolbar">
      <span>Current Rotation: {rotation * 90}°</span>
      <button onClick={rotate.rotateBackward}>Rotate Left</button>
      <button onClick={rotate.rotateForward}>Rotate Right</button>
    </div>
  )
}
```

### Applying the Rotation

For the rotation to be visible, you must wrap your page layers with the `<Rotate />` component inside the `Scroller`'s `renderPage` function. This component calculates and applies the necessary CSS transform. It's important to place it *outside* the `PagePointerProvider` to ensure interactions are correctly mapped to the rotated page.

```tsx {4, 11}
// Inside your main PDFViewer component
<Scroller
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <Rotate pageSize={{ width, height }}>
      <PagePointerProvider
        pageIndex={pageIndex}
        {/* ... other props */}
      >
        <RenderLayer pageIndex={pageIndex} scale={scale} />
      </PagePointerProvider>
    </Rotate>
  )}
/>
```

## Live Example

This is a complete viewer that uses the `<RotateToolbar />` and correctly applies the `<Rotate />` component to each page.

import { PDFViewer } from '../code-examples/rotate-example'

<PDFViewer />

## API Reference

### Configuration (`RotatePluginConfig`)

| Option | Type | Description |
| :--- | :--- | :--- |
| **`defaultRotation`** | `Rotation` | Sets the initial rotation for loaded documents. The `Rotation` enum can be imported from `@embedpdf/models`. <br />**Default**: `Rotation.Degree0` |

### Hook: `useRotate()`

Connects your component to the rotate plugin's state and functions.

#### Returns

| Property | Type | Description |
| :--- | :--- | :--- |
| **`rotation`** | `Rotation` | The current reactive rotation state (0, 1, 2, or 3). |
| **`provides`** | `RotateCapability \| null` | An object with methods to control rotation, or `null` if the plugin is not ready. |

#### `RotateCapability` Methods

| Method | Description |
| :--- | :--- |
| **`rotateForward()`** | Rotates the document 90 degrees clockwise. |
| **`rotateBackward()`** | Rotates the document 90 degrees counter-clockwise. |
| **`setRotation(rotation)`** | Sets the document to a specific `Rotation` value. |
| **`getRotation()`** | Returns the current rotation value. |

### Component: `<Rotate />`

A wrapper component that applies the correct CSS rotation transform to its children.

#### Props

| Prop | Type | Description |
| :--- | :--- | :--- |
| **`pageSize`** | `Size` | (Required) An object `{ width: number, height: number }` representing the unrotated dimensions of the page. This is used to calculate the correct transform origin. |
| **`children`** | `ReactNode` | The page layers that should be rotated. |